<template>
  <div class="addDataContent">
    <div class="infoContent">
      <el-row :gutter="1">
        <el-col :offset="1" :span="22">
          <el-form
            ref="form1"
            :model="organizationInfo"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="编码名称:" prop="encode">
              <el-input
                v-model="organizationInfo.encode"
                clearable
                placeholder="请输入编码名称"
              />
            </el-form-item>
            <el-form-item label="数据名称:" prop="name">
              <el-input
                v-model="organizationInfo.name"
                clearable
                placeholder="请输入数据名称"
              />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :offset="1" :span="22" stlye="overflow:hidden">
          <p class="stepCon">
            <span class="greenBtn" @click="$emit('close', false)">取消</span>
            <span class="greenBtn" @click="saveOrg">保存</span>
          </p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { updateDictData, addDictData } from '@/api/dataCenter'
export default {
  name: 'AddDataContent',
  props: {
    detail: {
      type: Object,
      default() {
        return {}
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      rules: {
        name: [{ required: true, message: '请填写数据名称', trigger: 'blur' }],
        encode: [{ required: true, message: '请填编码据名称', trigger: 'blur' }],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ]
      },
      organizationInfo: {
        name: '',
        status: 0,
        encode: ''
      }
    }
  },
  created() {
    this.organizationInfo = {
      ...this.organizationInfo,
      ...this.detail
    }
    console.log('create', this.organizationInfo)
  },
  mounted() {
  },
  methods: {
    async saveOrg() {
      Promise.all([this.$refs.form1.validate()])
        .then(async() => {
          var req, sucmsg, errmsg
          if (this.type === 'edit') {
            req = updateDictData
            sucmsg = '数据修改成功！'
            errmsg = '数据修改失败！'
          } else {
            req = addDictData
            this.organizationInfo.levels = 3
            sucmsg = '数据新增成功！'
            errmsg = '数据新增失败！'
          }
          req({ ...this.organizationInfo })
            .then(res => {
              if (res.status) {
                this.$emit('close', true)
                this.$msgBox.show(sucmsg)
              } else {
                this.$emit('close', false)
                this.$msgBox.error(res.message)
              }
            })
            .catch(err => {
              console.log(err)
              this.$emit('close', false)
              this.$msgBox.error(errmsg)
            })
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.addDataContent {
  font-size: 0.16rem;
  // min-height: 500px;
  position: relative;
  .infoType {
    height: 30px;
    line-height: 30px;
    background: #f1f1f1;
    > li {
      float: left;
      height: 100%;
      width: 80px;
      cursor: pointer;
      text-align: center;
      &.active {
        background: #fff;
        cursor: default;
        color: #2e91ff;
      }
    }
  }
  .infoContent {
    // padding: 20px 20px 40px;
  }
  .registrationInfo {
    text-align: center;
    > li {
      margin: 0 auto;
      display: inline-block;
      overflow: visible;
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      > div {
        float: left;
        width: 75px;
        text-align: right;
        margin-right: 5px;
        &:nth-of-type(2) {
          float: left;
          width: 700px;
          > div {
            float: left;
            width: 300px;
            > div {
              width: 300px;
            }
            &:last-of-type {
              float: right;
              width: 380px;
              > div {
                width: 75px;
                display: inline-block;
                &:last-of-type {
                  width: 300px;
                }
              }
            }
          }
        }
      }
      .longW {
        width: 700px;
        > div {
          width: 700px !important;
        }
      }
    }
  }
  .attechment {
    height: 410px;
  }
  .stepCon {
    text-align: right;
    color: $blue;
    // position: absolute;
    // bottom: 10px;
    // right: 20px;
    span {
      cursor: pointer;
      margin-left: 20px;
    }
  }
  .red-line {
    height: 1px;
    margin-bottom: 25px;
    background: red;
  }
}
.warningColor {
  color: $pink;
}
</style>
